<template>
	<view class="collect_answer-page">
		<view class="collect_answer-page-header">
			<mynavBar :title="title" :backgrouncolor="backgrouncolor" :gps="gps" :bgcolor="bgColor"></mynavBar>
		</view>
		<view class="collect_answer-page-content">
			<view class="collect-list-content">

				<view class="collect-answer-content-body">
					<view class="content-body-list" v-for="(item,index) in collect_list" :key="item.id"
						@click="goquestiindetals(item?.article_comment?.article?.id)">
						<img :src="queryIconImage(`myquestionlogo1`)" alt="" class="body-list-img"
							v-if="item?.article_comment?.public">
						<img :src="queryIconImage(`myquestionlogo2`)" alt="" class="body-list-img" v-else>
						<view class="content-body-tetx">

							<view class="body-tetx-left">
								<view class="tetx-left-title">
									提问:{{item?.article_comment?.article?.title}}</view>

								<view class="tetx-left-title">回答:{{item?.article_comment?.content}}</view>

								<span>{{Time(item.updated_at)}}</span>
								<span style="padding-left:10px"
									@click.stop="cacelCollect(item?.article_comment?.id,item?.article_comment?.article?.id)">删除</span>

							</view>

							<view v-if="item?.article_comment?.public" class="body-tetx-right-y">
								<span>回答已公开</span>
							</view>
							<view v-else class="body-tetx-right-n">
								<span>回答未公开</span>
							</view>
						</view>

					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		Time
	} from "@/utils/timenew.js"
	export default {
		data() {
			return {
				bgColor: 'rgba(165, 42, 42, 0)',
				gps: '',
				title: '收藏的回答',
				backgrouncolor: '#F4F4F4',

				collect_list: []
			}
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? []
			})
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			//#endif
			this.getData()
		},
		methods: {
			Time,
			getData() {
				this.$store.dispatch("remote/query", {
					model: "article_comment_visits",
					isloading: false,
					where: {
						user_user: {
							_eq: uni.getStorageSync('userInfo').id
						},
						is_collect: {
							_eq: true
						},
					},
					field_string: 'id updated_at article_comment{id article{id title content} content public}'

				}).then(rs => {
					console.log(rs)
					this.collect_list = rs.data_list
				})
			},

			//删除事件(取消收藏)
			cacelCollect(articleCommentId, articleId) {
				let that = this
				uni.showModal({
					title: '是否取消收藏这条回答?',
					content: '',
					cancelText: "是",
					confirmText: "否",
					confirmColor: "#000000",
					success: function(res) {
						if (!res.confirm) {
							that.$store.dispatch('app/runActionflowmain', {
								args: {
									actionflow_name: "文章_添加评论",
									payload: {
										operate: 7, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
										articleId: articleId, //文章id
										articleCommentId: articleCommentId, //答主评论id
									},
								},
							}).then(res => {
								that.getData()
							})
						}
					}
				})








			},
			goquestiindetals(id) {
				uni.navigateTo({
					url: `/pages_a/questiondetails/questiondetails?id=${id}`
				})
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
		},

		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			// 根据高度改变样式
			if (scrollTop < 50) {
				this.bgColor = 'rgba(247, 247, 247, 0)'

			} else if (scrollTop >= 50 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.9)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
	}
</script>

<style lang="scss">
	.collect_answer-page {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;

		.collect_answer-page-header {
			width: 100%;
			height: 343rpx;
		}

		.collect_answer-page-content {
			width: 100%;
			height: 100%;
			margin-top: -150rpx;

			.collect-list-content {
				width: 750rpx;
				height: 80rpx;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				box-shadow: 0px -10rpx 10rpx 0px rgba(0, 0, 0, 0.1);

				.collect-answer-content-body {
					flex: 1;
					background-color: #fff;
					overflow: hidden;
					overflow-y: auto;
					width: 100%;
					box-sizing: border-box;
					padding: 0 25rpx 0 30rpx;
					border-radius: 30rpx 30rpx 0rpx 0rpx;

					.content-body-list {
						width: 100%;
						height: 170rpx;
						box-sizing: border-box;
						border-bottom: 2rpx dashed #ccc;
						padding: 30rpx 10rpx 10rpx 10rpx;
						display: flex;
						align-items: center;

						.body-list-img {
							width: 39rpx;
							margin-right: 8rpx;
							height: 36rpx;
						}

						.content-body-tetx {
							flex: 1;
							align-items: flex-start;
							display: flex;
							justify-content: space-between;

							.body-tetx-left {
								width: 76%;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;
								padding-left: 10px;

								.tetx-left-title {
									font-size: 30rpx;
									font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
									font-weight: 500;
									color: #5F5F5F;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									line-height: 42rpx;
								}
							}

							.body-tetx-right-y {
								text-align: right;
								flex: 1;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #F09500;
								line-height: 85rpx;
							}

							.body-tetx-right-n {
								text-align: right;
								flex: 1;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 85rpx;
							}
						}
					}
				}


			}
		}
	}
</style>